<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('新建邮件')" />
<th:block th:include="include :: list-css" />
<style type="text/css">
	.layui-form-radio{margin-top: 0}
	.getUpload {cursor: pointer;height: 22px;display: block;margin-top: 10px;}
	.shadow{position:relative;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 20px rgba(0,0,0,.1) inset;background:#fffdfd;border-radius:10px;height: 100vh;overflow: hidden;}
	.shadow::after,.shadow::before{content:"";position:absolute;z-index:-1;bottom:26px;left:10px;width:50%;height:20%;box-shadow:0 15px 10px rgba(0,0,0,.7);transform:rotate(-3deg)}
	.shadow::after{right:10px;left:auto;transform:rotate(3deg)}
    .btn-list {height: auto;text-align: left;padding: 5px 0 5px 40px;margin: 0}
	.person_root {width: auto;margin-top: 3px;margin-left: 3px;border: 1px solid #0095e7;color: #0095e7;border-radius: 3px;display: block;float: left;}
	.person_root span:nth-child(1){width:auto;height:20px;line-height:20px;display:block;float:left;margin-left:5px;margin-right:0;border:0 none;padding-right:5px;color:#0095e7}
	.person_root i{width:20px;display:block;padding:0;float:left;line-height:20px;text-align:center;font-style:normal;text-indent:0;cursor:pointer}
	.reciveID_D,.ccUser_D{position: absolute;width: 98%;top: 1px;left:1px;height: auto;}
	.reciveID_D p,.ccUser_D p{height: 38px;line-height: 38px;padding-left: 10px;color: #757575;}
	.getSelect{cursor: pointer;}
	.input-clear{position: absolute;right: -17px;top: 9px;font-size: 15px;}
</style>
</head>
<body>
<div class="main-content">
	<div class="shadow">
		<form class="layui-form" action="">
			<input type="hidden" name="id" th:value="${mailContent['id']}">
			<input type="hidden" name="fileMark" th:value="${mailContent['id']}">
			<input type="hidden" name="sendID" th:value="${mailContent['sendID']}">
			<input type="hidden" name="sendCaption" th:value="${mailContent['sendCaption']}">
			<input type="hidden" name="sendDepartmentID" th:value="${mailContent['sendDepartmentID']}">
			<input type="hidden" name="sendDepartmentCaption" th:value="${mailContent['sendDepartmentCaption']}">
			
            <div class="layui-form-item btn-list" style="border-radius:10px 10px 0 0 ;">
                <div class="layui-btn layui-btn-danger layui-table-tools" onclick="savepost(true)">
                	<p class="dhicon dh-paper-plane-o" style="color:white;font-size:14px">
                		<span class="fa_span">发 送</span>
               		</p>
          		</div>
                <div class="layui-btn layui-table-tools importbtn-bg" onclick="savepost(false)">
                	<p class="dhicon dh-cube" style="color:white;font-size:14px">
                		<span class="fa_span">存草稿</span>
               		</p>
           		</div>
                <div class="layui-btn layui-table-tools importbtn-bg" onclick="getUpload('vHFilesDefault','Mail','',$('#fileFlag'));">
                	<p class="dhicon dh-paperclip" style="color:white;font-size:14px">
                		<span class="fa_span" id="fileFlag">附 件</span>
               		</p>
           		</div>
            </div>
            
			<div class="layui-form-item">
				<label class="layui-form-label">
					<span class="getSelect" data-for="reciveID">
						<i class="dhicon dh-newspaper-o">&nbsp;收件人：</i>
					</span>
				</label>
				<div class="layui-input-block reciveID_box">
					<div class="reciveID_D"></div>
					<input type="text" class="layui-input get-more" data-for="reciveID" readonly/>
					<input type="hidden" name="reciveID" id="reciveID" />
					<input type="hidden" name="reciveIDName" id="reciveIDName" />
					<i class="layui-icon layui-icon-more getMore" data-for="reciveID" ></i>
					<i class="dhicon dh-trash-o input-clear" title="清空" onclick="clearUser('reciveID')"></i>
				</div>
			</div>
			<div class="layui-form-item ccUser_box">
				<label class="layui-form-label">
					<span class="getSelect" data-for="ccUser">
						<i class="dhicon dh-newspaper-o">&nbsp;抄送：</i>
					</span>
				</label>
				<div class="layui-input-block">
					<div class="ccUser_D"></div>
					<input type="text" class="layui-input get-more" data-for="ccUser" readonly/>
					<input type="hidden" name="ccUser" id="ccUser" />
					<input type="hidden" name="ccUserName" id="ccUserName" />
					<i class="layui-icon layui-icon-more getMore" data-for="ccUser" ></i>
					<i class="dhicon dh-trash-o input-clear" title="清空" onclick="clearUser('ccUser')"></i>
				</div>
			</div>
			<div class="layui-form-item" style="height: auto">
				<label class="layui-form-label">主题：</label>
				<div class="layui-input-block">
					<input type="text" name="mailSubject" id="mailSubject" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="height: auto">
				<label class="layui-form-label">重要等级：</label>
				<div class="layui-input-block" style="text-align: left">
					<input type="radio" name="mailImportInt" value="0" title="普通" checked>
					<input type="radio" name="mailImportInt" value="1" title="急件">
				</div>
			</div>
			<div class="layui-form-item" style="height: auto">
				<label class="layui-form-label">群发邮件：</label>
				<div class="layui-input-block" style="text-align: left">
					<input type="radio" name="reciveKind" value="person" title="个人" checked>
					<input type="radio" name="reciveKind" value="org" title="公司">
					<input type="radio" name="reciveKind" value="dept" title="部门">
				</div>
			</div>

			<div class="layui-form-item" style="text-align: unset;">
				<label class="layui-form-label">正文：</label>
				<div class="layui-input-block">
					<div id="content">
					</div><br>
					<textarea id="mailContent" name="mailContent"  style="display: none"></textarea>
				</div>
			</div>
		</form>
	</div>
</div>

<script th:src="@{/js/jquery/jquery.min.js}"></script>
<script th:src="@{/js/jquery/jquery.cookie.js}"></script>
<script th:src="@{/js/layuiadmin-1.2.1/layui/layui.js?v=2}"></script>
<script th:src="@{/js/jquery/jquery.blockUI.min.js}"></script>
<script th:src="@{/dhecp/js/dh-common.js?v=53}"></script>
<script th:src="@{/dhecp/js/dh-ui.js?v=37}"></script>
<script th:src="@{/js/layuiadmin-1.2.1/lib/extend/wangEditor/wangEditor.min.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
var mailContent=[[${mailContent}]],
	pageType=[[${pageType}]],
	fromPageType=[[${fromPageType}]],
	moduleTable=[[${moduleTable}]];
	console.log(pageType);
/*]]>*/
</script>
<script type="text/javascript">
    // $(".btn-list").css('background',parent.logo_color_rgba);
    // $(".btn-list").css('backgroundImage', "linear-gradient(to right,#359FD4,#36B5C8,#25D8AB)");
	var reciveIDName_obj=[],reciveID_obj=[],ccUserName_obj=[],ccUser_obj=[],scUserName_obj=[],scUser_obj=[];
	switch(pageType){
		case 'reply'://回复页
			$(".reciveID_D").html('<span class="person_root"><span>'+mailContent['reciveIDName']+'</span><i class="close" onclick="close_span(this)" oliid="0" data-type="reciveID">x</i></span>');
			reciveIDName_obj.push(mailContent['reciveIDName']+';');
			reciveID_obj.push(mailContent['reciveID']+';');
			$("#reciveIDName").val(mailContent['reciveIDName']+';');
			$("#reciveID").val(mailContent['reciveID']+';');
			$("#mailSubject").val('回复：'+mailContent['mailSubject']);
			$("#fileFlag").html(mailContent['vHFilesDefault']);
			forContent();
			break;
		case 'transport'://转发
			$("#mailSubject").val('转发：'+mailContent['mailSubject']);
			$("#fileFlag").html(mailContent['vHFilesDefault']);
			forContent();
			break;
		case 'edit'://编辑
			forUser(mailContent['reciveIDName'],reciveIDName_obj,'reciveIDName','reciveID','reciveID_D'); //收件人名赋值
			forUser(mailContent['reciveID'],reciveID_obj,'reciveID'); //收件人编号赋值
			forUser(mailContent['ccUserName'],ccUserName_obj,'ccUserName','ccUser','ccUser_D'); //抄送人名赋值
			forUser(mailContent['ccUser'],ccUser_obj,'ccUser'); //抄送人编号赋值

			$("#mailSubject").val(mailContent['mailSubject']);
			$("#content").html(mailContent['mailContent']);
			$("#fileFlag").html(mailContent['vHFilesDefault']);
			$("input[name=important][value=1]").attr("checked", mailContent.important ? true : false);
			$("input[name=important][value=0]").attr("checked", mailContent.important ? false : true);
			$("input[name=perpetual][value=1]").attr("checked", mailContent.perpetual ? true : false);
			if(mailContent.mailImportInt == "普通")$("input[name=mailImportInt][value='普通']").attr("checked", true);
			if(mailContent.mailImportInt == "加急")$("input[name=mailImportInt][value='加急']").attr("checked", true);
			if(mailContent.mailImportInt == "特急")$("input[name=mailImportInt][value='特急']").attr("checked", true);
			break;
	}
	//正文赋值
	function forContent(){
		$("#content").html('<br><div style="font-size: 12px;font-family: Arial Narrow;padding:2px 0 2px 0;"><hr style="border-top: 1px dotted;margin: 10px 1px;"></div>' +
				'<div style="background: #f3f1f1;padding:5px 6px;">' +
				'<p style="margin:2px 0;"><b>发件人：</b>'+mailContent['reciveIDName']+';</p>' +
				'<p style="margin:2px 0;"><b>发件时间：</b>'+mailContent['sendTime']+';</p>' +
				'<p style="margin:2px 0;"><b>收件人：</b>'+mailContent['sendIDName']+'['+mailContent['sendID']+'];</p>' +
				'<p style="margin:2px 0;"><b>主题：</b>'+mailContent['mailSubject']+';</p></div><br>'+mailContent['mailContent']);
	}
	/*
	* 收件人、抄送人赋值
	* dataV  字符串值
	* forObj 目标对象 eg：reciveID_obj
	* forField 目标字段
	* dataType 目标类型
	* forHtml  tag赋值
	* fromBook  true来自通讯录赋值
	* */
	function forUser(dataV,forObj,forField,dataType,forHtml='',fromBook = false){
		var namestr = '';
		if(fromBook){
			if($.inArray(dataV+';', forObj) == '-1'){
				forObj.push(dataV+';');
				$.each(forObj,function (i,v){
					if(v){
						if(forHtml)namestr += '<span class="person_root"><span>'+v.replace(';','')+'</span><i class="close" onclick="close_span(this)" oliid="'+i+'" data-type="'+dataType+'">x</i></span>';
					}
				})
				var reg = new RegExp(",","g");
				$("#"+forField).val(forObj.toString().replace(reg,''));
			}else
				return false;
		}else{
			var str2obj = dataV.split(';');
			$.each(str2obj,function (i,v){
				if(v){
					forObj.push(v+';');
					if(forHtml)namestr += '<span class="person_root"><span>'+v+'</span><i class="close" onclick="close_span(this)" oliid="'+i+'" data-type="'+dataType+'">x</i></span>';
				}
			})
			$("#"+forField).val(dataV);
		}
		if(forHtml)$("."+forHtml).html(namestr);
		if(forField == 'reciveIDName'){
			$(".reciveID_D").parents(".layui-form-item").height($(".reciveID_D").height()+5)
			$("#reciveIDName").height($(".reciveID_D").height()+5)
		}else if(forField == 'ccUserName'){
			$(".ccUser_D").parents(".layui-form-item").height($(".ccUser_D").height()+5)
			$("#ccUserName").height($(".ccUser_D").height()+5)
		}
	}
	var $,layer,from,element;
	layui.use(['layer','element','form'], function () {
		$ = layui.jquery,
			layer = layui.layer,
			form = layui.form,
			element = layui.element;
		//监听保留邮件
		form.on('radio(perpetual)', function (data) {
			if(data.value == 1){
				$("#perpetual-1").show()
				$("#perpetual-0").hide()
			}else{
				$("#perpetual-1").hide()
				$("#perpetual-0").show()
			}
		});
	});
	<!--js初始化编辑器-->
	var E = window.wangEditor;
	var editor = new E('#content');
	var $mailContent = $('#mailContent');
	editor.config.height = $(window).height() - $('#content').offset().top - 50;
	editor.config.uploadImgServer = '/system/fileinfo/uploadmailimg';
	editor.config.uploadImgParams = {
		moduleFile: 'mailImg',
		vType: 'MailImg',
		fileMark:'mailImg',
		fieldName:'mailImg'
	}
	editor.config.uploadFileName = 'file';
	editor.config.onchange = function (html) {
		// 第二步，监控变化，同步更新到 textarea
		$mailContent.val(html)
	}
	editor.create();
	$mailContent.val(editor.txt.html())

	$(".getMore, .getSelect").click(function(){
		var data_for= $(this).attr('data-for');
		var selectedObject = $("#"+data_for).val();
		console.log(selectedObject);
		if(selectedObject)selectedObject = selectedObject.substring(0,selectedObject.length -1);
		
		var reg1 = new RegExp("\\[","g"),reg2 = new RegExp("]","g");
		selectedObject = selectedObject.replace(reg1,'(');
		selectedObject = selectedObject.replace(reg2,')');
		var title = '选择对象',url = "/system/organization/orgObjectSelect?pagetype=checkbox&by=all&selectedObject="+selectedObject,areaObj = ['1000px', '490px'];
		
		layer.open({
			type: 2//Page层类型
			,area: areaObj
			,offset: '10%'
			,title: title
			,shade: 0.6 //遮罩透明度
			,maxmin: true //允许全屏最小化
			,content: url
			,btn: ['确定', '关闭'] //只是为了演示
			,yes: function(index){
				var res = window["layui-layer-iframe" + index].callbackdata();
				if(res.length > 0){
					var reg = new RegExp(",","g");
					if(data_for == 'reciveID'){
						reciveIDName_obj = [], reciveID_obj = [];
						$.each(res,function (i,v) {
							reciveIDName_obj.push(v['orgName']+' ['+v['orgid']+'];');
							reciveID_obj.push('[' + v['orgKind'] + ']'+v['orgid']+';');
						})
						var reciveIDNameStr = reciveIDName_obj.toString().replace(reg,'');
						var reciveIDStr = reciveID_obj.toString().replace(reg,'');
						$("#reciveIDName").val(reciveIDNameStr.substring(0,reciveIDNameStr.length-1));
						$("#reciveID").val(reciveIDStr.substring(0,reciveIDStr.length-1));
						var htmlStr = '';
						$.each(reciveIDName_obj,function (i2,v2) {
							htmlStr += '<span class="person_root"><span>'+v2.replace(';','')+'</span><i class="close" onclick="close_span(this)" oliid="'+i2+'" data-type="reciveID">x</i></span>';
						})
						$(".reciveID_D").html(htmlStr);
					}else if(data_for == 'ccUser'){
						ccUserName_obj = [], ccUser_obj = [];
						$.each(res,function (i,v) {
							ccUserName_obj.push(v['orgName']+' ['+v['orgid']+'];');
							ccUser_obj.push('[' + v['orgKind'] + ']'+v['orgid']+';');
						})
						var ccUserNameStr = ccUserName_obj.toString().replace(reg,'');
						var ccUserStr = ccUser_obj.toString().replace(reg,'');
						$("#ccUserName").val(ccUserNameStr.substring(0,ccUserNameStr.length-1));
						$("#ccUser").val(ccUserStr.substring(0,ccUserStr.length-1));
						var htmlStr = '';
						$.each(ccUserName_obj,function (i2,v2) {
							htmlStr += '<span class="person_root"><span>'+v2.replace(';','')+'</span><i class="close" onclick="close_span(this)" oliid="'+i2+'" data-type="ccUser">x</i></span>';
						})
						$(".ccUser_D").html(htmlStr);
					}
					layer.closeAll();
				}else{
					layer.msg("请选择数据");
				}
			}
			,btn2: function(){
				layer.closeAll();
			}
		});
	})
	//点击收件人、抄送框，焦点
	var focus_obj = 'reciveID';
	$(".reciveID_box,.ccUser_box").click(function (){
		$(this).find(".just_input").focus();
		focus_obj = $(this).find(".just_input").attr("data-from");
	})
	//删除tag
	function close_span(obj){
		var reg = new RegExp(",","g");
		var oliid = $(obj).attr('oliid');
			data_type = $(obj).attr('data-type');
		if(data_type == 'reciveID'){
			reciveIDName_obj.splice(oliid, 1);
			reciveID_obj.splice(oliid, 1);
			var reciveIDNameStr = reciveIDName_obj.toString().replace(reg,'');
			var reciveIDStr = reciveID_obj.toString().replace(reg,'');
			$("#reciveIDName").val(reciveIDNameStr.substring(0,reciveIDNameStr.length-1));
			$("#reciveID").val(reciveIDStr.substring(0,reciveIDStr.length-1));
			$(".reciveID_D").html('<input class="just_input" type="text" data-from="reciveID">');
			$.each(reciveIDName_obj,function (i2,v2) {
				$(".reciveID_D .just_input").before('<span class="person_root"><span>'+v2.replace(';','')+'</span><i class="close" onclick="close_span(this)" oliid="'+i2+'" data-type="'+data_type+'">x</i></span>');
			})
			if (reciveIDName_obj.length > 0){
				$(".reciveID_D").parents(".layui-form-item").height($(".reciveID_D").height()+5);
				$("#reciveIDName").height($(".reciveID_D").height()+5);
			}
			focus_obj = 'reciveID';
		}else if(data_type == 'ccUser'){
			ccUserName_obj.splice(oliid, 1);
			ccUser_obj.splice(oliid, 1);
			var ccUserNameStr = ccUserName_obj.toString().replace(reg,'');
			var ccUserStr = ccUser_obj.toString().replace(reg,'');
			$("#ccUserName").val(ccUserNameStr.substring(0,ccUserNameStr.length-1));
			$("#ccUser").val(ccUserStr.substring(0,ccUserStr.length-1));
			$(".ccUser_D").html('<input class="just_input" type="text" data-from="ccUser">');
			$.each(ccUserName_obj,function (i2,v2) {
				$(".ccUser_D .just_input").before('<span class="person_root"><span>'+v2.replace(';','')+'</span><i class="close" onclick="close_span(this)" oliid="'+i2+'" data-type="'+data_type+'">x</i></span>');
			})
			if (ccUserName_obj.length > 0){
				$(".ccUser_D").parents(".layui-form-item").height($(".ccUser_D").height()+5)
				$("#ccUserName").height($(".ccUser_D").height()+5)
			}
			focus_obj = 'ccUser';
		}
	}
	// 清空用户
	function clearUser(foruser){
		if(foruser == 'reciveID'){
			reciveIDName_obj = [];
			reciveID_obj = [];
			$("#reciveIDName").val('');
			$("#reciveID").val('');
			$(".reciveID_D").html('<input class="just_input" type="text" data-from="reciveID">');
			$(".reciveID_D").parents(".layui-form-item").height("30px");
			$("#reciveIDName").height("30px");
		}else if(foruser == 'ccUser'){
			ccUserName_obj = [];
			ccUser_obj = [];
			$("#ccUserName").val('');
			$("#ccUser").val('');
			$(".ccUser_D").html('<input class="just_input" type="text" data-from="ccUser">');
			$(".ccUser_D").parents(".layui-form-item").height("30px")
			$("#ccUserName").height("30px")
		}
	}
	// 邮件保存或发送
	function savepost(sendFlag){
		if(sendFlag){// 发送邮件
			
		}else{// 保存邮件
			
		}
		
		
		if(!$("#reciveID").val()){
			layer.msg("请选择收件人");
			return false;
		}
		if(!$("#mailSubject").val()){
			layer.msg("请填写主题");
			return false;
		}
		if(pageType == 'transport')$("[name='id']").val('');
		if(mailType == 0){
			var url = '/system/oamail/savepost'
		}else if(mailType == 1){
			var url = '/system/oamail/sendpost'
		}
		var postData = {'infoItems':JSON.stringify([$(".layui-form").serializeFormToJson()])},rflag = false;
		$.operate.post(url, postData, function(res){
			if(res.code == 0){
				//更新列表显示数量
				parent.refreshMail();
				var userList = res.data.split(',');
				$.each(userList,function (i, v){
					parent.parent.sendMessage(v,'<p>您有新邮件,请及时查看哦！</p><p>主题：'+$("#mailSubject").val()+'</p>');
				})
				rflag = true;
			}
		},false);
		if(rflag && mailType == 1){
			layer.msg('操作成功', {
				icon: '1', offset: '10%', shift: 5,
				time: 20000, //20s后自动关闭
				btn: ['新建邮件', '返回列表'],
				btn1: function(){
					window.location.href = "/system/oamail/edit?pageType=add&fromPageType=outbox";
				},
				btn2: function(){
					window.location.href = "/system/oamail/mailList?pageType="+fromPageType;
					$("body",parent.document).find(".link-book").css("display","none");
					$("body",parent.document).find("#search-form").css("display","block");
                    parent.treeReload();
				}
			});
		}
	}
</script>
</body>
</html>